<template>
    <div class="subpage withdraw-container">
        <div class="withdraw-top">
            <div class="withdraw-top-one">
                <div class="withdraw-top-one-left">
                    <img src="../../../assets/img/bank_up_icon_pre.png" alt="">
                    <span>{{bankName}}（{{bankCardNum}}）</span>
                </div>
                <span>{{userName}}</span>
            </div>
            <div class="withdraw-top-two">
                <p>提现金额</p>
                <van-field
                    readonly
                    size="large"
                    clickable
                    :value="withdrawNum"
                    placeholder="请输入提现金额"
                    @touchstart.native.stop="show = true"
                />
                <!-- <input type="tel" placeholder="请输入提现金额" maxlength="9" v-model="withdrawNum"> -->
            </div>
            <div class="withdraw-top-three">
                <p>
                    账户余额：<span class="color-yellow">{{amount}}元</span>   
                </p>
                <p>
                    手续费：<span class="color-yellow">2元</span>
                </p>
            </div>
        </div>
        
        <div class="withdraw-center">
            <span>交易密码</span>
            <input type="password" placeholder="请输入交易密码" maxlength="6" v-model="password">
        </div>
        
        <van-button round class="u-btn-default u-bg-gradient-light withdraw-btn" @click="withdrawFn">提现</van-button>

        <div class="withdraw-tips">
            <p>温馨提示</p>
            <p>1、提现手续费2元/笔；</p>
            <p>2、提现到账时间为T+1个工作日，节假日顺延；</p>
            <p>3、单笔满50元可以提现，已实际公告为准。</p>
        </div>

        <van-number-keyboard
            :show="show"
            :maxlength="12"
            extra-key="."
            close-button-text="完成"
            @input="inputFn"
            @delete="deleteFn"
            @blur="show = false"
        />
    </div>
</template>

<script>
import { NumberKeyboard } from 'vant';
export default {
    components: {
        [NumberKeyboard.name]:NumberKeyboard
    },
    data() {
        return {
            bankName: '',
            bankCardNum: '',
            userName: '',
            withdrawNum: '',
            password: '',
            amount: 0,
            show: false,
            validatorFlag: false,
            fixedVal: '',
            isPayPwd: ''
        }
    },
    created() {
        this.bankName = this.$store.getters.userInfo.bankName;
        this.bankCardNum = this.$store.getters.userInfo.cardNumber.substr(-4);
        this.userName = this.$store.getters.userInfo.userName;
        this.getUserInfo()
    },
    mounted() {
        this.$tool.addEventListenerInputFocusout()
    },
    methods: {
        getUserInfo() { //获取用户钱包余额
            this.$api.get('/api/user/detail?noLoading')
                .then((res) => {
                    this.isPayPwd = res.data.isPayPwd;
                    this.amount = res.data.accountMoney;
                    this.$store.commit("setUserInfo", res.data);
                })
        },
        inputFn(key) { //输入字符
            if(key == '.'){
                if(this.withdrawNum){
                    if(this.withdrawNum.indexOf('.') != -1){
                        this.withdrawNum += '';
                    }else{
                        this.withdrawNum += key;
                    }
                }else{
                    this.withdrawNum = '';
                }
            }else{
                if(!this.validatorFlag){
                    this.withdrawNum += key;
                    if(!this.$tool.validator.isMoney(this.withdrawNum)){
                        this.validatorFlag = true;
                        let fixedVal = Number(this.withdrawNum).toFixed(3).toString();
                        this.withdrawNum = fixedVal.slice(0, fixedVal.length - 1);
                    }
                }
            }
        },
        deleteFn() { //删除输入字符
            if(this.withdrawNum){
                this.withdrawNum = this.withdrawNum.slice(0, this.withdrawNum.length - 1);
                if(this.$tool.validator.isMoney(this.withdrawNum)){
                    this.validatorFlag = false;
                }
            }
        },
        withdrawFn() {
            if(this.isPayPwd != 1){
                this.$tool.toast('请先设置交易密码', 1000)
                setTimeout(() => {
                    this.$router.push({
                        path: '/my/accountSet/setTradePassword/' + this.isPayPwd
                    })
                }, 1200)
                return
            }
            if(!this.$tool.validator.isEmpty(this.withdrawNum)){
                this.$tool.toast('请输入提现金额')
                return
            }
            if(parseFloat(this.withdrawNum) < 50){
                this.$tool.toast('提现金额不能低于50元')
                return
            }
            if(!this.$tool.validator.isEmpty(this.password)){
                this.$tool.toast('请输入交易密码')
                return
            }
            if(parseFloat(this.withdrawNum) > this.amount){
                this.$tool.toast('提现金额不能高于当前账户余额')
                return
            }

            this.withdrawAjax()
        },
        withdrawAjax() {
            let postData = {
                txMoney: this.withdrawNum,
                payPwd: this.$md5(this.password)
            }
            this.$api.post('/api/withdraw/save', postData)
                .then((res) => {
                    if(res.data){
                        if(res.data.code == 20014){
                            this.$tool.toast(res.data.message)
                        }else{
                            this.$router.push({
                                name: 'withdrawSuccess',
                                query: {
                                    withdrawNum: this.withdrawNum,
                                    id: res.data
                                }
                            })
                        }
                    }
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .withdraw-container {
        width: 100%;
        padding: 16px 16px 0;
        box-sizing: border-box;
        .withdraw-top {
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 4px;
            overflow: hidden;
            .withdraw-top-one {
                width: 100%;
                padding: 16px 0;
                box-sizing: border-box;
                border-bottom: 1px solid #f2f2f2;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                .withdraw-top-one-left {
                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                        object-fit: cover;
                        margin-right: 12px;
                    }
                }
            }
            .withdraw-top-two {
                width: 100%;
                padding: 16px 0 10px;
                box-sizing: border-box;
                border-bottom: 1px solid #f2f2f2;
                p {
                    margin-bottom: 20px;
                    font-size: 16px;
                    color: #969C9E;
                }
                input {
                    width: 100%;
                    height: 25px;
                    line-height: 25px;
                    padding: 0;
                    font-size: 16px;
                    outline: none;
                    border: none;
                    background-color: #fff;
                    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
                        font-size: 14px;
                        color: #969C9E;
                    }
                    &::-moz-placeholder { /* Firefox 19+ */  
                        font-size: 14px;
                        color: #969C9E;
                    }
                    &:-ms-input-placeholder { /* IE 10+ */ 
                        font-size: 14px;
                        color: #969C9E;
                    }
                    &:-moz-placeholder { /* Firefox 18- */ 
                        font-size: 14px;
                        color: #969C9E;
                    }
                }
            }
            .withdraw-top-three {
                width: 100%;
                padding: 16px 0;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                    color: #5D6164;
                }
            }
        }
        .withdraw-center {
            width: 100%;
            margin-top: 10px;
            padding: 14px 16px;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
                display: block;
                width: 88px;
                font-size: 16px;
            }
            input {
                flex: 1;
                font-size: 16px;
                outline: none;
                border: none;
                background-color: #fff;
                &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
                    font-size: 14px;
                    color: #969C9E;
                }
                &::-moz-placeholder { /* Firefox 19+ */  
                    font-size: 14px;
                    color: #969C9E;
                }
                &:-ms-input-placeholder { /* IE 10+ */ 
                    font-size: 14px;
                    color: #969C9E;
                }
                &:-moz-placeholder { /* Firefox 18- */ 
                    font-size: 14px;
                    color: #969C9E;
                }
            }
        }
        .withdraw-btn {
            margin: 32px 0;
        }
        .withdraw-tips {
            p {
                margin-bottom: 6px;
                color: #969C9E;
            }
            p:first-child {
                margin-bottom: 12px;
            }
        }
    }
</style>

<style lang="scss">
    .withdraw-container {
        .van-cell {
            padding: 0;
        }
        .van-number-keyboard__close {
            color: #31BC8D;
        }
    }
</style>